<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="public/public_css::public_css ('批量打印快递面单')" />
<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <form class="layui-form layui-card-header  layui-card-header-auto" id="searchForm">
                <div class="layui-inline">
                    <label class="layui-form-label">打印状态</label>
                    <div class="layui-input-inline">
                        <select type="text"
                                id="printType"
                                name="print"
                                placeholder="打印状态">
                            <option></option>
                            <option value="0">未打印</option>
                            <option value="1">已打印</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">发运编号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="fybh" id="code" placeholder="发运编号" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">波次编号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="bcbh" id="bcbh" placeholder="波次编号" />
                    </div>
                </div>
                <div class="layui-inline inline-search-btn">
                    <!--<a class="layui-btn layui-btn-normal" data-type="reload">搜索</a>-->
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                    <a class="layui-btn layui-btn-normal" onclick="queryTable(1)" id="query" data-type="reload">查询</a>
                    <button type="reset" onclick="queryTable(0)" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
            <a class="layui-btn layui-btn-sm layui-btn-normal" id="addInfor" onclick="batchPrint()">多选打印</a>
            <section class="panel panel-padding layui-card-body" >
                <div class="pro">
                    <table id="table" class="table text-nowrap"></table>
                </div>
            </section>
        </div>
    </div>
</div>
</div>
</body>
<style>
    .blocks{
        display: flex;
        flex-direction: column;
        width: 20rem;
        height: 6rem;
    }
    .blockout{
        display: flex;
        justify-content: space-between;
        margin: 1.5rem 0;
        padding: 0 1rem;
    }
    #addInfor{
        width: 10rem;
        margin-left: 1rem;
        position: relative;
        top: 1rem;
        z-index: 1;
    }
</style>
<div th:include="public/public_js::public_js"></div>
<div th:include="public/public_btn::public_btn"></div>
<script>
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;


        // 主页面table
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination: false,//分页开关
            checkboxHeader: false,
            showColumns: false,// 列选择
            url: '/wmsshipmentorder/selectPrintOrder',
            columns: [
                {field: '', checkbox: true},
                {field:'fybh',title:'SO编号'},
                {field:'cjr',title:'创建人'},
                {field:'khmc',title:'客户名称'},
                {field:'show_cyslb',title:'承运商类别'},
                {field:'khddh',title:'客户订单号'},
                {field:'khdz',title:'客户地址'},
                {field:'erji',title:'SO类型'},
                {field:'sheng',title:'省'},
                {field:'shi',title:'市'},
                {field:'lxrxm',title:'联系人'}
            ],
            queryParams: function () {//查询条件
                return  {
                    page: 1,
                    rows: 10
                };
            }


        });

        window.batchPrint = function () {
            var arr = [];
            var $rows = $table.bootstrapTable('getSelections');
            if ($rows.length > 0) {
                arr = $.map($rows, function (row) {
                    return row.id;
                })
                $.ajax({
                    url: '/zxsdwms/wmsbox/printeZxmx',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify({ids: arr}),
                    success: function (data) {
                        if(data.type === 'success') {
                            var contentList = data.data;
                            if (contentList.length !== 0) {
                                // 先调用方法
                                let LODOP = GetLodop()
                                // 打印名称
                                // LODOP.PRINT_INIT('打印快递面单')
                                for (let item of contentList) {
                                    console.log(item);
                                    /* NewPage意思新的一页 如果多个数据放到for里面必须写 */
                                    LODOP.NewPage();
                                    // ADD_PRINT_URL 设置参数 item 最后的item是你打印的地址
                                    LODOP.ADD_PRINT_URL(0, 0, 746, '100%', item)
                                    LODOP.SET_PRINT_STYLEA(0, 'HOrient', 3)
                                    LODOP.SET_PRINT_STYLEA(0, 'VOrient', 3)
                                }
                                LODOP.PREVIEW()
                            } else {
                                layer.msg('打印数据为空');
                            }
                        }
                    }
                })
            }else{
                layer.msg("至少选择一条数据");
            }
        };

        //搜索按钮
        window.queryTable = function (val) {
            var formdata = $("form").serializeArray();
            var Datas = {};
            var DATA = {};
            formdata.forEach(function (item) {
                Datas[item.name] = item.value;
            });
            console.log('Datas', Datas);
            if (val === 1) {
                if (Datas.print !== "") {
                    DATA.print = Datas.print;
                }
                if (Datas.fybh !== "") {
                    DATA.fybh = Datas.fybh;
                }
                if (Datas.bcbh !== "") {
                    DATA.bcbh = Datas.bcbh;
                }
            }
            DATA.page = 1;
            DATA.rows = 10;
            $('#table').bootstrapTable('refresh',{
                query: DATA
            })
        }

    })

</script>
</html>